<template>
	<view class="content">
		<view class="top_input">
			<input type="text" v-model="test" maxlength="1" />
			<button @click="push_zi">查询</button>
		</view>
		<view class="more" v-if="more">
			<view>
				<text><b>汉字:</b>{{more.hanzi}}</text>
			</view>
			<view>
				<text><b>拼音:</b>{{more.pinyin}}</text>
			</view>
			<view>
				<text><b>词组:</b></text>
				<view>
					{{more.words}}
				</view>
			</view>
			<view>
				<text><b>基本含义:</b></text>
				<view>
					{{more.basic_explain}}
				</view>
			</view>
			<view>
				<text><b>笔画：</b>{{more.bihua}}</text>
			</view>
			<view>
				<text><b>部首：</b>{{more.bushou}}</text>
			</view>
			<view>
				<!-- <text><b>详细解释：</b></text> -->
				<view class="more_text">
					<text v-for="item in more.detail_explain">{{item}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get_picture
	} from '@/api/index.js'
	export default {
		data() {
			return {
				test: '',
				more:''
			}
		},
		mounted() {
		},
		methods: {
			push_zi(){
				get_picture({
					text: this.test
				}).then(res => {
					console.log(res)
					if(res.data.code==200){
						console.log(res)
						this.more=res.data.result
					}
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		padding: 25rpx;
		box-sizing: border-box;
	}

	.content .top_input {
		width: 100%;
		
	}
	
	.content .top_input input{
		height:80rpx;
		border: 1px solid #005500;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		color: #005500;
	}
	
	.content .top_input button{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: aliceblue;
		background: #005500;
	}
	
	.more{
		border: 1px solid #005500;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		line-height:50rpx;
		font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	}
	
	.more>view{
		margin-top: 10rpx;
	}
	
	.more>view b{
		margin-right: 10rpx;
	}
	.more_text text{
		display: block;
		margin-top: 5rpx;
	}
	
</style>